<template>

权益名称:<input type="text" v-model="RName">
<input type="button" value="查询" @click="LoadData">

<h2>列表显示</h2>
<table border="1" class="table table-success">
    <thead>
        <tr>
            <td>权益名称</td>
            <td>会员权益使用</td>
            <td>是否自定义权益</td>
            <td>权益使用规则</td>
            <td>权益类型</td>
            <td>操作</td>
        </tr>


    </thead>
    <tbody>
        <tr v-for="item in info">
            <td>{{item.MR_Name}}</td>
            <td>{{item.MR_Info}}</td>
            <td>{{item.MR_IsCustom}}</td>
            <td>{{item.MR_Rule}}</td>
            <td>{{item.MR_RuleType}}</td>
            <td>操作
                <a href="#" @click="Delete(item.MR_Id)" style="margin-right: 20px;">删除</a>
                <a href="#" @click="Update(item.MR_Id)" style="margin-right: 20px;">修改</a>
            </td>
        </tr>


    </tbody>
</table>

当前共{{ pageInfo.totalCount }}条数据 ,每页显示{{pageInfo.pageSize  }}条数据
当前第{{ pageInfo.pageIndex }}/{{ pageInfo.pageCount }}页

<span>
    <a href="#" @click="PageLoadInfo('F')" style="margin-right: 20px;">首页</a>
    <a href="#" @click="PageLoadInfo('U')" style="margin-right: 20px;">上一页</a>
    <a href="#" @click="PageLoadInfo('N')" style="margin-right: 20px;">下一页</a>
    <a href="#" @click="PageLoadInfo('E')" style="margin-right: 20px;">尾页</a>
</span>

<select v-model="newSize" @change="ChangeSize" style="margin-right: 20px;">
    <option :value="1">1/页</option>
    <option :value="2">2/页</option>
    <option :value="3">3/页</option>
    <option :value="5">5/页</option>
</select>


<input type="text" v-model="newIndex" style="width: 40px;">
<input type="button" value="跳转" @click="Tiao">

</template>
<script setup lang="ts">

import axios from 'axios';
import { onMounted,ref } from 'vue';
import { useRouter} from 'vue-router';

const router=useRouter();
//修改
const Update=(MRid:number)=>{

    router.push({

        name:"UpdateRights",
        params:{
            id:MRid
        }
    })
       
        
    }

    const newIndex=ref("");
    const newSize=ref(2);
//页容量
    const ChangeSize=()=>{
pageInfo.value.pageSize=newSize.value;
LoadData();


    }

//跳转
const Tiao=()=>{

    var nIndex=newIndex.value;

if(nIndex==""){
    alert("不能为空");
    return;
}

if(isNaN(Number(nIndex))){
    alert("必须填数字");
    return;

}

if(Number(nIndex)<1){
    alert("页码必须大于等于1");
    return;
}

if(Number(nIndex)>pageInfo.value.pageCount)
{
    alert("页码必须小于总页数");
    return;

}


pageInfo.value.pageIndex=Number(nIndex);
LoadData();


}




const RName=ref("");


const pageInfo=ref({
    pageIndex:1,
    pageSize:2,
    pageCount:0,
    totalCount:0


})

onMounted(()=>{
    LoadData();
})

const info =ref([{
    MR_Id:0,
    MR_Name:"",
    MR_Info:"",
    MR_IsCustom:false,
    MR_Rule:"",
    MR_RuleType:"",


}])

const LoadData=()=>{
axios.get('https://localhost:7153/api/MemberRights/ShowRights',

{
    params:{
        MRName:RName.value,
        pageInex:pageInfo.value.pageIndex,
        pageSize:pageInfo.value.pageSize

    }
}

)

.then(res=>{

info.value=res.data.Data_Info;
pageInfo.value.pageCount=res.data.PageCount;
pageInfo.value.totalCount=res.data.TotalCount;

})


}

//分页
const PageLoadInfo=(choose:string)=>{

switch(choose){
      case "F":
        pageInfo.value.pageIndex=1;
        break;
        case "U":
            if(pageInfo.value.pageIndex>1){
                pageInfo.value.pageIndex--
            }
            else{
                alert("页码必须大于1");
            }
            break;

            case "N":
                if(pageInfo.value.pageIndex<pageInfo.value.pageCount){
                    pageInfo.value.pageIndex++
                }
                else{
                    alert("已经是最后一页");
                }

                break;
                case "E":
                    pageInfo.value.pageIndex=pageInfo.value.pageCount;
                    break;




}
LoadData();



}


const Delete=(MRid:number)=>{
if(confirm("你确定要删除吗?")){

    axios.get('https://localhost:7153/api/MemberRights/DelteRights',
    
    {
        params:{
            MR_Id:MRid
        }
    }
    
    )
     .then(res=>{
        if(res.data>0){
            alert("删除成功");
            LoadData();
        }
        else{
            alert("删除失败");
        }



     })


}


}

</script>